import React, { useEffect, useState } from 'react'
import '../css/Details_ditu.css'
import AMapLoader from '@amap/amap-jsapi-loader'
import axios from 'axios'
import { useLocation } from 'react-router-dom'
// 地图组件
export default function Details_ditu() {

    let ids = useLocation().search.split('=')[1]
    let [address, setaddress] = useState([])
    let [storeaddress, setstoreaddress] = useState([])
    let getjing = async () => {
        let data = await axios.get(`http://127.0.0.1:3000/users/order_details?ids=${ids}`)
        let obj = data.data.data
        setaddress(obj.address.latlong)
        let shang = obj.goodsid[0].store
        let shangjia = await axios.get(`http://127.0.0.1:3000/users/store?ids=${shang}`)
        setstoreaddress(shangjia.data.data.latitude)
    }
    let map = null
    let [height, setheight] = useState("30vh")
    useEffect(() => {
        getjing()
    }, [])
    useEffect(() => {

        window._AMapSecurityConfig = {
            securityJsCode: "5a1793cee170062811d6c800a7173abe",
        };
        AMapLoader.load({
            key: "52d6ae360f4d2f1957b92b2f654fb652",
            version: "2.0",
            plugins: ["AMap.Scale", "AMap.Driving"],
        }).then((AMap) => {
            //创建地图
            map = new AMap.Map("container", {
                zoom: 11,
                center: [115.487819, 38.853447],
                viewMode: '3D',
            })
            var drivingOption = {
                policy: AMap.DrivingPolicy.REAL_TRAFFIC,//考虑实时路况
                ferry: 1, // 是否可以使用轮渡
            }
            var driving = new AMap.Driving(drivingOption)
            // 根据起终点经纬度规划驾车导航路线

            driving.search(new AMap.LngLat(storeaddress[0], storeaddress[1]), new AMap.LngLat(address[0], address[1]), function (status, result) {
                if (status === 'complete') {
                    if (result.routes && result.routes.length) {
                        // 绘制第一条路线，也可以按需求绘制其它几条路线
                        drawRoute(result.routes[0])

                    }
                } else {
                    console.log('获取驾车数据失败：' + result);

                }
            });
            function drawRoute(route) {
                var path = parseRouteToPath(route)

                var startMarker = new AMap.Marker({
                    position: path[0],
                    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
                    map: map
                })

                var endMarker = new AMap.Marker({
                    position: path[path.length - 1],
                    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
                    map: map
                })

                var routeLine = new AMap.Polyline({
                    path: path,
                    isOutline: true,
                    outlineColor: '#ffeeee',
                    borderWeight: 2,
                    strokeWeight: 5,
                    strokeOpacity: 0.9,
                    strokeColor: '#0091ff',
                    lineJoin: 'round'
                })

                map.add(routeLine);

                // 调整视野达到最佳显示区域
                map.setFitView([startMarker, endMarker, routeLine])
            }
            function parseRouteToPath(route) {
                var path = []

                for (var i = 0, l = route.steps.length; i < l; i++) {
                    var step = route.steps[i]

                    for (var j = 0, n = step.path.length; j < n; j++) {
                        path.push(step.path[j])
                    }
                }

                return path
            }

        }).catch((e) => {
            console.log(e);
        })
        return () => {
            map?.destroy()
        }
    }, [address, storeaddress])
    return (
        <div>
            <div id="container" className='container' style={{ height: height }}>
                
            </div>
            <button className='details_btn' style={{display:height=="30vh" ? "block":"none"}} onClick={()=>{setheight("100vh")}}>全屏</button>
            <button className='details_btn1' style={{display:height=="100vh" ? "block":"none"}} onClick={()=>{setheight("30vh")}}>缩小</button>
        </div>
    )
}
